<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">垂直布局</div>
                    <div>
                        <p>标题有主标题和副标题</p>
                        <p>主标题和副标题的属性设置一样</p>
                        <p>标题能设置多个</p>
                        <a target="_blank" style="color: rebeccapurple;"
                            href="https://echarts.apache.org/zh/option.html#title.itemGap">更多设置详情：点击下面的主标题</a>
                        <!-- <p style="color: #b6b6b6;">
                            属性：text、target、textAlign
                        </p> -->
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        let otherValue1 = 0.3

        option = {
            series: [
                {
                    type: "gauge",
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 1,
                    center: ["50%", "40%"],
                    splitNumber: 8,
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            color: [
                                [0.2, "#B2D3FF"],
                                [0.4, "#93C0FF"],
                                [0.6, "#7BAEFF"],
                                [0.8, "#699EFC"],
                                [1, "#5C8FEA"],
                            ],
                        },
                    },
                    pointer: {
                        icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                        length: "20%",
                        width: 20,
                        offsetCenter: [0, "-60%"],
                        itemStyle: {
                            color: "#000000",
                        },
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: "auto",
                            width: 2,
                        },
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: "auto",
                            width: 5,
                        },
                    },
                    axisLabel: {
                        color: "#464646",
                        fontSize: 10,
                        distance: -60,
                        formatter: function (value) {
                            if (value === 0.0) {
                                return "Good";
                            } else if (value === 1) {
                                return "Poor";
                            }
                        },
                    },
                    title: {
                        offsetCenter: [0, "-20%"],
                        fontSize: 30,
                    },
                    detail: {
                        fontSize: 20,
                        offsetCenter: [0, "45%"],
                        valueAnimation: true,
                        // formatter: function (value) {
                        //      return (value *100).toFixed(2);
                        // },
                        color: "#000000",
                    },
                    data: [
                        {
                            value: otherValue1,
                        },
                    ],
                },
            ],
        }


        option && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>